<script setup lang="ts">
import { ref } from 'vue'

// 定义网站数据
interface Website {
  id: number
  title: string
  url: string
  imageUrl: string
}

const websites = ref<Website[]>([
  {
    id: 1,
    title: 'Compodoc',
    url: 'https://compodoc.github.io/website/',
    imageUrl: 'https://assets.youzhan.org/img/2/56/a833a68f7a57a45ca04198faa483c.jpg!md'
  },
  {
    id: 2,
    title: 'PeARS',
    url: 'http://pearsearch.org/',
    imageUrl: 'https://assets.youzhan.org/img/9/4d/277b9fb5b3a0c97e49ce1d3c3d335.jpg!md'
  },
  {
    id: 3,
    title: 'Visual Studio Code',
    url: 'https://code.visualstudio.com/',
    imageUrl: 'https://assets.youzhan.org/img/a/03/772cec53ab290841dd99c8d74b332.jpg!md'
  },
  {
    id: 4,
    title: 'vi',
    url: 'https://vi.ai/',
    imageUrl: 'https://assets.youzhan.org/img/8/f4/d8ece1342920b4388c8174d349925.jpg!md'
  },
  {
    id: 5,
    title: 'HelpHero',
    url: 'https://helphero.co/',
    imageUrl: 'https://assets.youzhan.org/img/8/34/102a079ba7c2d66ba4f1abbd0fdbd.jpg!md'
  },
  {
    id: 6,
    title: 'CrazyCall',
    url: 'https://www.crazycall.com/',
    imageUrl: 'https://assets.youzhan.org/img/d/9a/6b638248ca769019615b630b17645.jpg!md'
  },
  {
    id: 7,
    title: '星巴克',
    url: 'https://www.starbucks.com.cn/',
    imageUrl: 'https://assets.youzhan.org/img/d/20/8305a1ae99bc794dafca1df04f9e6.jpg!md'
  },
  {
    id: 8,
    title: 'D2C',
    url: 'https://d2c.io/',
    imageUrl: 'https://assets.youzhan.org/img/2/78/c20a2eb2088577b7f4c29a00a2df3.jpg!md'
  },
  {
    id: 9,
    title: 'Redash',
    url: 'https://redash.io/',
    imageUrl: 'https://assets.youzhan.org/img/4/02/aa854814ed291b78d28f85f384ce9.jpg!md'
  },
  {
    id: 10,
    title: 'Azul Systems',
    url: 'https://www.azul.com/',
    imageUrl: 'https://assets.youzhan.org/img/5/54/c203ca2c5c3fe7bb55e02dc9e9020.jpg!md'
  }
])

// 分页数据
const currentPage = ref(1)
const totalPages = ref(5)
</script>

<template>
  <div class="home-view">
    <!-- Header -->
    <header class="header-global">
      <nav class="navbar navbar-main navbar-expand-lg navbar-transparent navbar-light headroom">
        <div class="container">
          <a class="navbar-brand mr-lg-5" href="/">
            <h1 class="text-white mb-0 text-2xl">Bootstrap 优站精选</h1>
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_global"
            aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="navbar-collapse collapse" id="navbar_global">
            <ul class="navbar-nav align-items-lg-center ml-lg-auto">
              <li class="nav-item d-none d-lg-block ml-lg-4">
                <a href="/submit/" target="_blank" class="btn btn-neutral btn-icon font-normal">
                  <span class="btn-inner--icon">
                    <i class="fa fa-cloud-upload mr-2"></i>
                  </span>
                  <span class="nav-link-inner--text">提交站点</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

    <main>
      <!-- Hero section -->
      <section class="section-shaped my-0 bg-center bg-cover h-120">
        <div class="shape shape-style-1 shape-primary alpha-4">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="separator separator-bottom separator-skew z-0">
          <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1"
            xmlns="http://www.w3.org/2000/svg">
            <polygon class="fill-white" points="2560 0 2560 100 0 100"></polygon>
          </svg>
        </div>
      </section>

      <!-- Websites grid -->
      <section class="section -mt-64">
        <div class="container container-lg">
          <div class="row">
            <div v-for="website in websites" :key="website.id" class="col-md-6 mb-8">
              <div class="card card-lift--hover shadow border-0 p-3">
                <a :href="website.url" :title="website.title" target="_blank"
                  class="w-full relative overflow-hidden bg-gray-200 pt-16:9">
                  <img :src="website.imageUrl" :alt="website.title" class="card-img absolute top-0">
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Pagination -->
      <section class="section pt-0">
        <nav aria-label="Page navigation">
          <ul class="pagination pagination-lg justify-content-center">
            <li class="page-item" :class="{ disabled: currentPage === 1 }">
              <a class="page-link" href="#" tabindex="-1" @click.prevent="currentPage > 1 && currentPage--">
                <i class="fa fa-angle-left"></i>
                <span class="sr-only">上一页</span>
              </a>
            </li>

            <li v-for="page in totalPages" :key="page" class="page-item" :class="{ active: page === currentPage }">
              <a class="page-link" href="#" @click.prevent="currentPage = page">{{ page }}</a>
            </li>

            <li class="page-item" :class="{ disabled: currentPage === totalPages }">
              <a class="page-link" href="#" @click.prevent="currentPage < totalPages && currentPage++">
                <i class="fa fa-angle-right"></i>
                <span class="sr-only">下一页</span>
              </a>
            </li>
          </ul>
        </nav>
      </section>
    </main>

    <!-- Footer -->
    <footer class="footer">
      <div class="container">
        <div class="row row-grid align-items-center mb-5">
          <div class="col-lg-6">
            <h3 class="text-primary font-weight-light mb-2">提交你的站点</h3>
            <p class="mb-0 font-weight-light">如果你的网站基于 <a href="https://www.getbootstrap.cn/"
                target="_blank">Bootstrap</a> 构建、并且用心的设计，那就请提交给我们并在这里展示吧！</p>
          </div>
          <div class="col-lg-6 text-lg-center btn-wrapper">
            <a href="/submit/" target="_blank" class="btn btn-primary btn-icon font-normal">
              <span class="btn-inner--icon">
                <i class="fa fa-cloud-upload mr-2"></i>
              </span>
              <span class="nav-link-inner--text">提交站点</span>
            </a>
          </div>
        </div>
        <hr>
        <div class="row align-items-center justify-content-md-between">
          <div class="col-md-6">
            <div class="copyright">
              &copy; 2024 Bootstrap 优站精选
            </div>
          </div>
          <div class="col-md-6">
            <ul class="nav nav-footer justify-content-end">
              <li class="nav-item">
                <a href="/about/" class="nav-link">关于</a>
              </li>
              <li class="nav-item">
                <a href="/guanggao/" class="nav-link">广告合作</a>
              </li>
              <li class="nav-item">
                <a href="https://beian.miit.gov.cn/" class="nav-link" target="_blank">京ICP备15031610号-1</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.section-shaped {
  background-image: linear-gradient(150deg, #281483 0%, #8f6ed5 70%, #d782d9 100%);
}

.h-120 {
  height: 120px;
}

.-mt-64 {
  margin-top: -64px;
}

.pt-16\:9 {
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.alpha-4 {
  opacity: 0.4;
}

.shape {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.shape span {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #5e72e4;
}

.shape :nth-child(1) {
  top: 10%;
  left: 5%;
  width: 200px;
  height: 200px;
}

.shape :nth-child(2) {
  top: 20%;
  right: 10%;
  width: 150px;
  height: 150px;
}

.shape :nth-child(3) {
  top: 60%;
  left: 8%;
  width: 100px;
  height: 100px;
}

.shape :nth-child(4) {
  top: 50%;
  right: 20%;
  width: 80px;
  height: 80px;
}

.shape :nth-child(5) {
  bottom: 30%;
  left: 15%;
  width: 150px;
  height: 150px;
}

.shape :nth-child(6) {
  bottom: 10%;
  right: 25%;
  width: 80px;
  height: 80px;
}

.shape :nth-child(7) {
  bottom: 20%;
  left: 35%;
  width: 150px;
  height: 150px;
}

.separator {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 150px;
}

.separator-bottom {
  bottom: 0;
}

.separator-skew {
  transform: skewY(2deg);
  transform-origin: 0 100%;
}

.fill-white {
  fill: #fff;
}

.btn-neutral {
  background: #fff;
  color: #5e72e4;
}

.btn-neutral:hover {
  background: #f6f9fc;
  color: #5e72e4;
}

.mb-8 {
  margin-bottom: 2rem;
}

.shadow {
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07) !important;
}

.card-lift--hover:hover {
  transform: translateY(-20px);
  transition: all 0.3s ease;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.375rem;
}

.card .card-img {
  transition: all 0.3s ease;
}

.card:hover .card-img {
  transform: scale(1.05);
}

.btn-wrapper {
  display: flex;
  justify-content: center;
}

@media (max-width: 992px) {
  .navbar-brand {
    margin-right: 1rem !important;
  }

  .mr-lg-5 {
    margin-right: 3rem !important;
  }

  .ml-lg-auto {
    margin-left: auto !important;
  }
}
</style>